<template>
	<view class="hotelistcontainer">
		<view class="search  border-r3">
			<view class="left flexleft1" @click="show = true">
				<view>
					<text style="margin-right: 10rpx;">住</text>
					<text class="color1">{{startime}}</text>
				</view>
				<view>
					<text style="margin-right: 10rpx;">离</text>
					<text class="color1">{{endtime}}</text>
				</view>
			</view>
			<view class="middle">
				<text>{{city_text}}</text>
			</view>
			<view class="shu" style="margin-right: 24rpx;">
			</view>
			<view class="inputt">
				<view class="flexleft" style="width: 100%;">
					<view class="sousuo flexleft" style="width: 100%;">
						<image src="../../../static/images/hotel/search.png" mode="" class="searchimg"></image>
						<input type="text" placeholder="民宿/关键词" class="inp" style="width: 100%;" v-model="keyword"
							confirm-type="search" @confirm="init()">
					</view>
				</view>
			</view>
		</view>
		<view class="menulist flexbetween">
			<view class="item1 flexcenter" @click="changestatus(1)">
				<view :class="zh_type==1?'bold':''">综合排序</view>
			</view>
			<view class="item1 flexcenter" @click="changestatus(2)">
				<view :class="jl_type==1||jl_type==2?'bold':''">距离排序</view>
				<view class="imgs">
					<image src="../../static/images/hotel/shang.png" v-show="jl_type!=1">
						<image src="../../static/images/hotel/shang1.png" v-show="jl_type==1">
							<image src="../../static/images/hotel/xaiangle.png" v-show="jl_type!=2"></image>
							<image src="../../static/images/hotel/xai1.png" v-show="jl_type==2">
				</view>
			</view>
			<view class="item1 flexcenter" @click="changestatus(3)">
				<view :class="price_type==1||price_type==2?'bold':''">价格排序</view>
				<view class="imgs">
					<image src="../../static/images/hotel/shang.png" v-show="price_type!=1">
						<image src="../../static/images/hotel/shang1.png" v-show="price_type==1">
							<image src="../../static/images/hotel/xaiangle.png" v-show="price_type!=2"></image>
							<image src="../../static/images/hotel/xai1.png" v-show="price_type==2">
				</view>
			</view>
			<view class="item1 flexcenter" @click="changestatus(4)">
				<view :class="star_type==1||star_type==2?'bold':''">评价排序</view>
				<view class="imgs">
					<image src="../../static/images/hotel/shang.png" v-show="star_type!=1">
						<image src="../../static/images/hotel/shang1.png" v-show="star_type==1">
							<image src="../../static/images/hotel/xaiangle.png" v-show="star_type!=2"></image>
							<image src="../../static/images/hotel/xai1.png" v-show="star_type==2">
				</view>
			</view>
		</view>
		<view class="flexcenter1" v-if="!list.data.length">
			<view class="placeholderimg" style="margin-top: 300rpx;">
				<image src='../../static/images/bg-icons/placeholderimg.png' mode=""></image>
			</view>
			<view class="zanwushuju">暂无数据~</view>
		</view>
		<view class="jiudianlist">
			<view class="section flexleft" v-for="item in list.data" :key="item.id" @click="godetail(item.id,item.distance)">
				<view class="left">
					<image :src="item.logo_text" mode="" class="section_img"></image>
				</view>
				<view class="right">
					<view class="right_ershou yhxiankuan">{{item.name}}</view>
					<view class="section_center">
						<view class="tedian flexbetween">
							<view class="pingfen">{{item.star}}</view>
							<view class="miaoshu" v-if="item.comment_data">{{item.comment_data.content}}</view>
							<view class="pingnum">{{item.comment_count}}评论</view>
						</view>
						<view class="juli">距您{{item.distance}}km</view>
					</view>
					<scroll-view :show-scrollbar="true" :scroll-x="true" class="telist flexleft">
						<view class="hotelte margin-right1" v-for="ite in item.tags" :key="ite.id">{{ite.name}}
						</view>
					</scroll-view>
					<view class="price">
						￥{{item.minprice}}<text style="font-size: 24rpx;">起</text>
					</view>
				</view>
			</view>
		</view>
		<u-calendar color="#00D2E1" startText="入住" endText="离店" :mode="mode" confirmText="确认选择"
			confirmDisabledText="确认选择" :show="show" @confirm="confirm" @close="show = false"></u-calendar>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	const QQMapWX = require('@/common/qqmap-wx-jssdk.min.js');
	// 实例化API核心类
	const qqmapsdk = new QQMapWX({
		key: 'MMFBZ-E43YQ-5GX5K-GR5DT-OAEAK-5XB4N' // 必填
	});
	export default {
		data() {
			return {
				keyword: '',
				show: false,
				mode: 'range',
				lat: "",
				lng: "",
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				city_text: "", //当前城市信息
				currentAddress: "", //当前位置
				start: "", //年月日
				end: "", //年月日
				startime: "", //开始时间
				endtime: "", //结束时间
				startweek: "", //开始周
				endweek: "", //结束周
				daynum: 1,
				zh_type: 1, //综合排序：0=不按综合排序，1=按综合排序
				jl_type: 0, //距离排序：0=不按距离排序，1=由远到近，2=由近到远
				price_type: 0, //价格排序：0=不按价格排序，1=有高到低，2=有低到高
				star_type: 0, //0=不按评价排序，1=由高到低，2=有低到高
			};
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg));
			console.log(data, "惊雷u")
			this.start = data.start
			this.end = data.end
			this.startime = data.startime
			this.endtime = data.endtime
			this.startweek = data.startweek
			this.endweek = data.endweek
			this.daynum = data.daynum
			this.keyword = data.keyword
			this.getlocation()
		},
		methods: {
			// 切换筛选状态
			changestatus(value) {
				if (value == 1) {
					this.zh_type = this.zh_type == 1 ? 0 : 1
					this.jl_type = 0
					this.price_type = 0
					this.star_type = 0
				}
				if (value == 2) {
					this.zh_type = 0
					this.jl_type = this.jl_type == 1 ? 2 : 1
					this.price_type = 0
					this.star_type = 0
				}
				if (value == 3) {
					this.zh_type = 0
					this.jl_type = 0
					this.price_type = this.price_type == 1 ? 2 : 1
					this.star_type = 0
				}
				if (value == 4) {
					this.zh_type = 0
					this.jl_type = 0
					this.price_type = 0
					this.star_type = this.star_type == 1 ? 2 : 1
				}
				this.init()
			},
			// 小程序获取当前位置信息
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
						qqmapsdk.reverseGeocoder({
							//Object格式
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: function(res) { //成功后的回调
								const mapdata = res.result.address_component;
								_this.city_text = mapdata.city;
								_this.currentAddress = res.result.address
							},
							fail: function(error) {
								console.error(error);
							},
							complete: function(res) {
								//console.log(res);
							}
						});

					}
				});

			},
			getinfo() {
				httpRequest.request('api/user/index', 'GET', {}).then(res => {
					this.userinfo = res.data
				})
			},
			// 热门推荐列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('api/shop/index', 'GET', {
					page: page || 1,
					limit: _this.limit,
					lat: this.lat,
					lng: this.lng,
					keyword: this.keyword,
					zh_type: this.zh_type,
					jl_type: this.jl_type,
					price_type: this.price_type,
					star_type: this.star_type
				}, false, false, false).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			currentclick() {
				this.keyword = this.currentAddress
			},
			chaxun() {
				uni.navigateTo({
					url: '/pages/hotel/hotelist'
				})
			},
			// 时间选择确定
			confirm(e) {
				let start = e[0]
				let end = e[e.length - 1]
				this.startime = Number(start[5] + start[6]) + "月" + Number(start[8] + start[9]) + "日" //月日赋值
				this.endtime = Number(end[5] + end[6]) + "月" + Number(end[8] + end[9]) + "日" //月日赋值
				this.start = start
				this.end = end
				this.startweek = this.weekchange(start) //计算周
				this.endweek = this.weekchange(end) //计算周
				this.daynum = this.DateDiff(start, end) //计算间隔天数
				this.show = false
			},
			// 日期初始化
			dateinit() {
				// 今天
				let start = this.date(new Date())
				let end = new Date()
				// 明天
				end.setTime(end.getTime() + 24 * 60 * 60 * 1000);
				end = this.date(end)
				this.start = start
				this.end = end
				this.startime = Number(start[5] + start[6]) + "月" + Number(start[8] + start[9]) + "日" //月日赋值
				this.endtime = Number(end[5] + end[6]) + "月" + Number(end[8] + end[9]) + "日" //月日赋值
				this.startweek = this.weekchange(start) //计算周
				this.endweek = this.weekchange(end) //计算周
				this.daynum = this.DateDiff(start, end) //计算间隔天数
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			// 周转换，此处地date是年月日
			weekchange(date) {
				let weekArrayList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ]
				let index = new Date(date).getDay()
				let week = weekArrayList[index]
				return week
			},
			// 计算两个日期之间相差天数
			DateDiff(sDate1, sDate2) {
				//sDate1和sDate2是2006-12-18格式
				var aDate1, aDate2, oDate1, oDate2, iDays;
				aDate1 = sDate1.split("-");
				oDate1 = new Date(aDate1[1] + '/' + aDate1[2] + '/' + aDate1[0]);
				aDate2 = sDate2.split("-");
				oDate2 = new Date(aDate2[1] + '/' + aDate2[2] + '/' + aDate2[0]);
				iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24);
				return iDays
			},
			godetail(id,juli) {
				let date = {
					id: id, //酒店id
					start: this.start, //年月日
					end: this.end, //年月日
					startime: this.startime, //开始时间
					endtime: this.endtime, //结束时间
					startweek: this.startweek, //开始周
					endweek: this.endweek, //结束周
					daynum: this.daynum,
					juli:juli
				}
				uni.navigateTo({
					url: '/pages/hotel/jiudianxq?msg=' + encodeURIComponent(JSON.stringify(date))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item1 {
		font-size: 28rpx;
	}

	.bold {
		font-weight: bold;
		font-size: 30rpx;
	}

	.hotelistcontainer {
		background-color: #fafafa;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.search {
		border: solid 1rpx rgba(0, 210, 225, 1);
		padding: 4rpx 27rpx;
		display: flex;

		.left {
			font-size: 20rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 23rpx;
			margin-right: 10rpx
		}

		.middle {
			font-size: 26rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #00D2E1;
			line-height: 30rpx;
			display: flex;
			align-items: center;
			margin-right: 20rpx;
		}

		.inputt {
			display: flex;
			align-items: center;
			width: 55%;

			.searchimg {
				width: 19rpx;
				height: 19rpx;
				border: none;
			}

			.inp {

				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 28rpx;
				height: 28rpx
			}
		}
	}

	.menulist {
		margin-top: 30rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 28rpx;
	}

	.imgs {
		padding: 4rpx;
		display: flex;
		flex-direction: column;
	
	image {
			width: 12rpx;
			height: 8rpx;
			padding: 4rpx;
		}
	}

	.jiudianlist {
		margin-top: 30rpx;
	}

	.left {
		// margin-right: 29rpx;
	}

	.right {
		width: 65%;
		display: flex;
		flex-direction: column;
	}

	.section_img {
		width: 199rpx;
		height: 262rpx;
		background-size: 100% 100%;
		border-radius: 15rpx 15rpx 15rpx 15rpx;

	}

	.section {
		padding: 35rpx 29rpx 29rpx 29rpx;
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		justify-content: space-between;
	}

	.section_center {
		.tedian {
			margin-top: 15rpx;

			.pingfen {
				font-size: 26rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #FFFFFF;
				line-height: 30rpx;
				background-color: rgba(0, 210, 225, 1);
				padding: 4rpx;
				margin-right: 4rpx;
			}

			.miaoshu {
				font-size: 24rpx;
				width: 300rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #00D2E1;
				line-height: 28rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.pingnum {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 28rpx;
				white-space: nowrap;
			}
		}
	}

	.price {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF5C00;
		line-height: 28rpx;
		flex: 1;
		text-align: right;
		margin-top: 20rpx;
	}

	.juli {
		margin-top: 15rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 30rpx;
	}

	.telist {
		overflow: hidden;
		margin-top: 15rpx;
		white-space: nowrap;

		.hotelte {
			display: inline-block;
			background-color: #F0F0F0;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			// font-weight: 500;
			color: #666;
			line-height: 26rpx;
			white-space: nowrap;
			padding:2rpx 10rpx;
			border-radius: 4rpx;
		}
	}
</style>
